<template>
    <!--{{  }}  就是文本插值表达式  接收属性名 并展示内容-->
    <h1>标题：{{ title }}</h1>
    <p>这是包含html标签的样式：{{ rawHtml }}</p>
    <p>使用v-html方式处理标签样式：<span style=" font-weight: 700;" v-html="rawHtml"></span></p>
    <p style="color: red; font-size: 20px;">{{ msg }}</p>
    <!--如果后台传递数据的时候 包含html标签 如何去除标签并展示到前端页面-->
    <!--第一个指令  v-html v-text -->
    <h2 v-once>数量是：{{ num }}</h2>
    <p v-once>用户姓名：{{ uname }}</p>
    <button @click="changname">改变name值</button>
    <hr>
    <h3>用户名字：{{ obj.name }}</h3>
    <h3>年龄是：{{ obj.age }}</h3>
    <h3>是否成年:{{ obj.age >18 ? '成年' : '未成年' }}</h3>
</template>
<script>
//选项式api
export default {
    data() {
        return {
            // 定义属性名 并赋值
            msg: ' h5的标签存放的地方',
            title: '文本插值表达式',
            rawHtml: '<h2 style="color: red">我是h2标签 用来做副文本标题</h2>',
            num: 2,
            uname: '小明',
            obj: {
                name: '萧炎',
                age: 17
            }
        }
    },
    methods: {
        // changname() {
        //     //选项api支持this的 必须用this.属性名进行赋值
        //     this.uname = "美杜莎"
        //    this.num++
        // }
        //第二种函数的定义
        changname: function () { 
            this.uname = "美杜莎"
            this.num++
        }
        //第三种函数操作  在组合api中常用
    //    let changname= () => {
    //         uname = "美杜莎"
    //         num++
    //     }
    }
}

</script>
<style scoped>
/* 这是存放样式的地方 */
</style>
<!-- 全局样式 -->
<style></style>